<template>
	<view>
		<map style="width: 100%;height: 430px;"></map>
		<view class="washShopItem" v-model="washShopInfo">
			<view class="washShopInfo">
				<image src="../../../static/1.5.png"></image>
				<view class="shoptitle">
					<text style="font-weight: bold;font-size: 32rpx;">{{washShopInfo.name}}</text>
				</view>
				<view class="shopstar">
					<!-- 只读状态 -->
					<uni-rate :readonly="true" :value="washShopInfo.star" />
					<text style="margin-left: 10rpx;">{{washShopInfo.star}}分</text>
					<text style="margin-left: 40rpx;">销量：{{washShopInfo.sales}}</text>
				</view>
				<view class="opentime">
					<text>营业时间 {{washShopInfo.opentime}}</text>
				</view>
				<view class="shopaddress">
					<text>{{washShopInfo.address}}</text>
				</view>
			</view>
			<button class="hui" @click="phone">联系门店</button> <button @click="booking">立即预约</button>
			<view class="bottomView">
						<view>
							<!-- 普通弹窗 -->
							<uni-popup ref="popup" background-color="#fff" :mask-click="false">
								<view class="popup-content" style="text-align: center; margin-top: 30rpx; margin-bottom: 30rpx;">
									<view style="font-size: 40rpx;">13592667163</view>
								</view>
								<view style="display: flex; padding-bottom: 20rpx;">
									<button type="primary" style="width: 200rpx;" size="mini" @click="close()">呼叫</button>
									<button type="primary" style="width: 200rpx;" size="mini" @click="close()">取消</button>
								</view>
			
							</uni-popup>
						</view>
					</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				washShopInfo: {
					id: 1,
					name: "伟业汽车维修(人民路店	)",
					distance: 44,
					star: 3,
					sales: 322,
					opentime: "周一至周五 09:00-22:00",
					address: "山阳区人民中路32号"
				},
				
			}
		},
		methods: {
			
						// 底部弹出框关闭方法
						close() {
							this.$refs.popup.close()
						},
						//联系门店弹出框
						phone(){
							this.$refs.popup.open('bottom')
						},
					   //跳转进入立即预约页面
						booking(){
							uni.navigateTo({
								url:"/pages/service/yuyue/yuyue"
							})
						}
			
		}
	}
</script>

<style>
	.hui{
		background-color: darkgray;
	}
	button{
		width: 150px;
		height: 40px;
		border-radius: 35px;
		background-color: red;
		float: left;
		margin-top: 20px;
		margin-right: 20px;
		padding-bottom: 20px;
	}
	image{
		width: 100px;
		height: 60px;
		float: right;
		margin: 20px auto;
	}
	.washShopItem {
		position: fixed;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

</style>
